Виджеты. Способы скругления изображений

➡️ Скачать шпаргалку "Способы скругления изображений"
➡️ Ссылка на репозиторий с кодом этого урока

Способы скругления изображений

Виджет CircleAvatar

Основные параметры

backgroundColor : цвет фона, если не задано изображение
foregroundColor : цвет содержимого (текста или иконки)
backgroundImage : изображение на фоне
radius : радиус круга (по умолчанию 20.0)
minRadius и maxRadius : если нужно задать адаптивные размеры
child : любой виджет, например, Text или Icon

Обратите внимание!
Для изображений из ассетов или из сети используются такие конструкторы:

• AssetImage
• NetworkImage

import 'package:flutter/material.dart';

class RoundedImageExample1 extends StatelessWidget {
  /// Использование виджета CircleAvatar
  const RoundedImageExample1({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        backgroundImage: AssetImage("assets/images/pro.webp"),
        radius: 150,
      ),
    );
  }
}

                  

class RoundedImageExample2 extends StatelessWidget {  
  /// Использование виджета CircleAvatar  
  const RoundedImageExample2({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: CircleAvatar(  
        radius: 40, // Радиус круга  
        backgroundColor: Colors.blue, // Фон  
        child: Text(  
          "F",  
          style: TextStyle(fontSize: 30, color: Colors.white),  
        ),  
      ),  
    );  
  }  
}

                  

Виджет ClipOval

Позволяет обрезать любой дочерний виджет в форме овала (включая круг).

class RoundedImageExample3 extends StatelessWidget {  
  /// Использование виджета ClipOval  
  const RoundedImageExample3({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: ClipOval(  
        child: Image.asset(  
          "assets/images/pro.webp",  
          width: 300,  
          height: 300,  
          fit: BoxFit.cover,  
        ),  
      ),  
    );  
  }  
}

                  

Виджет Container с BoxShape.circle

Используем BoxDecoration с borderRadius: BorderRadius.circular(100), где радиус делаем равным половине ширины и высоты.

class RoundedImageExample4 extends StatelessWidget {  
  /// Использование виджета BoxShape.circle  
  const RoundedImageExample4({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: Container(  
        width: 300,  
        height: 300,  
        decoration: BoxDecoration(  
          shape: BoxShape.circle,  
          image: DecorationImage(  
            image: AssetImage("assets/images/pro.webp"),  
            fit: BoxFit.cover,  
          ),  
        ),  
      ),  
    );  
  }  
}

                  

Виджет ClipRRect

Используем ClipRRect, который обрезает изображение по заданному borderRadius.

class RoundedImageExample5 extends StatelessWidget {  
  /// Использование виджета ClipRRect  
  const RoundedImageExample5({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: ClipRRect(  
        // Радиус должен быть половина от ширины  
        borderRadius: BorderRadius.circular(150),  
        child: Image.asset(  
          "assets/images/pro.webp",  
          width: 300,  
          height: 300,  
          fit: BoxFit.cover,  
        ),  
      ),  
    );  
  }  
}